
<template>
  <base-page-view class-name="page-container">
    <view class="content">
      <view class="list">
        <view class="goods">
          <image :src="list.icon" class="paltformIcon" v-if="list.icon"/>
          <view class="title">{{ list.title }}</view>
        </view>
        <view class="totalEarnings">
          <template >
            <!-- 1-购买钻石卡奖励，2-赠送VIP卡奖励，3-购买钻石礼包董事奖励 -->
            <view v-if="list.inviteType===1">订单金额：¥ {{ list.orderAmount | formatMoney }}</view>
            <view v-else-if="list.inviteType===2">成功送出VIP卡</view>
            <view v-else-if="list.inviteType===3">董事奖励</view>
          </template>
          <template>
            <view class="redPrice">
              邀请奖励：¥ {{ list.inviteAmount | formatMoney }}
            </view>
          </template>
        </view>
        <view class="c_border"></view>
        <view class="order">
          <view class="details">
            <view>到账时间:</view>
            <view>{{ list.payTime|formatDate }}</view>
          </view>
        </view>
      </view>
    </view>
  </base-page-view>
</template>

<script>
import { filters } from '@/utils/tools.js'
export default {
  components: {
  },
  data() {
    return {
      query:{},
      pageSize: 10,
      pageNo: 1,
      list: {},
      nomore:false,
      incomeType:"",//类型
      uniqueNo:"",//单号
      inviteType:"",//邀请类型，邀请接口要传
    }
  },
  computed: {
  },
  onLoad(option) {
    this.query = JSON.parse(decodeURIComponent(option.query));
    console.log(this.query);
    this.getList()
  },
  onPullDownRefresh() {
    this.getList()
  },
  onShow() {
  },
  methods: {
    async getList() {
      const res = await this.$api.gainApi.invite_settle_detail({
        userId: this.$store.state.userInfo.uid,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        incomeType: this.query.incomeType,
        uniqueNo:this.query.uniqueNo,
        inviteType:this.query.inviteType||0
      })
      if (res.code === '000000') {
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
        this.list = res.data;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.settleDetails-tab{
    display: flex;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #EEEEEE;
    background-color: #fff;
    .tab-item{
        flex: 1;
        text-align: center;
        position: relative;
        color: #333;
        .borderBottom{
            width: 32rpx;
            position: absolute;
            height: 6rpx;
            border-radius: 10rpx;
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -16rpx;
            bottom: 10rpx;
            background-color: #000;
        }
    }
    .actives{
        color: #000;
        font-weight: bold;
    }
}
.content{
    .headl{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #fff;
        font-size: 28rpx;
        padding: 24rpx 32rpx;
        font-family:PingFang SC;
        background-color: #000;
    }
    .list{
        margin: 20rpx 20rpx 0;
        padding: 10rpx 25rpx 25rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        border-radius:20rpx;
        .goods{
            @include flex;
            font-size: 26rpx;
            color: #333;
            height: 60rpx;
            line-height: 60rpx;
            align-items: center;
            .paltformIcon{
                width: 30rpx;
                height: 30rpx;
                margin-right: 10rpx;
            }
            .title{
                @include sub-item;
                @include text-ellipsis;
            }
            
        }
        .title_pri_del{
            text-decoration:line-through;
            color:#CCCCCC;
        }
        .totalEarnings{
            display: flex;
            flex-direction: row;
            justify-content: space-between ;
            color: #333333;
            font-size: 26rpx;
            .redPrice{
                color: #e21536;
            }
        }
        .c_border{
            border-bottom: 2rpx solid #EAEAEA;
            margin: 26rpx 0;
        }
        .order{
            color: #999999;
            font-size: 26rpx;
            .details{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                height: 38rpx;
                line-height: 38rpx;
            }
        }
    }
}
.nomore{
    text-align: center;
    color: #999;
}
.empty_view{
  @include sub-item;
  margin: 0 auto;
  width: 240rpx;
  height:240rpx;
  margin-top: 35vh;
  .empty_img{
      width: 240rpx;
      height: 240rpx;
  }
  .tit{
      color: #000;
      margin-top: 10rpx;
      text-align: center;
      font-size: 28rpx;
  }
}
.searchBtn{
    position: fixed;
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    box-shadow:3px 4px 10px 0px rgba(0, 0, 0, 0.2);
    bottom:300rpx;
    bottom: calc(300rpx + constant(safe-area-inset-bottom));
    bottom: calc(300rpx + env(safe-area-inset-bottom));
    right: 34rpx;
    z-index: 99;
}
</style>